<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript基础语法</title>
    <style>
        body{
            background-color: rgb(255, 255, 255);
        }
        .div{
            width: 100%;
            height: 50rem;
            background-color: #EFEFEAAE;
            margin: 0 auto;
        }
        table{
            width: 50%;
            border-collapse: collapse;
            /*border: #a013b6 2px solid;*/
            margin: 0 auto;"
        }
        #tableA td,th{
            text-align: center;
            border: blueviolet 4px solid;
        }
        #tableA td{
            height: 2rem;
            color: #2502FFFF;
        }
    </style>
    <script type="text/javascript">
<!--        js代码区-->
        // let index = 1;
        // while (index < 2){
        //     alert("你好啊！"+index);
        //     index++;
//java基本数据类型：
// byte(位)
// short(短整型)
// int(整型)
// long(长整型)
// float(浮点型、单精度型)
// double(双精度型)
// char(字符型)
// boolean(布尔型)

//JS基本数据类型
/*
*字符串 string
* 数字 number
* 布尔 boolean
* 数组 array
* 对象 object
* 空 null
* 未定义 undefined -----已声明但未初始化
* typeof("123456") -----返回括号内的数据类型
* */
function kill() {
    // alert("KILL！")
    // const aa = null;
    let a = 50, b = 152;
    if (100 >= a){
        alert(a);

    }else{
        alert(b);
    }
    console.log("log");
    console.debug("debug");
    console.info("info");
    console.error("error");
}
// const s = 234;
// alert(s);
function getTime() {
    let time = document.getElementById("number").value;
    // console.info(time);
    switch (time) {
        case "1" :
        case "2" :
        case "3" : console.info("春天");document.getElementById("span_1").innerHTML = "您查询的月份属于<span id=\"spaner\" style=\"color: blue\">&nbsp;&nbsp;&nbsp;&nbsp;</span>季";document.getElementById("spaner").innerText = "春";break;
        case "4" :
        case "5" :
        case "6" : console.info("夏天");document.getElementById("span_1").innerHTML = "您查询的月份属于<span id=\"spaner\" style=\"color: blue\">&nbsp;&nbsp;&nbsp;&nbsp;</span>季";document.getElementById("spaner").innerText = "夏";break;
        case "7" :
        case "8" :
        case "9" : console.info("秋天");document.getElementById("span_1").innerHTML = "您查询的月份属于<span id=\"spaner\" style=\"color: blue\">&nbsp;&nbsp;&nbsp;&nbsp;</span>季";document.getElementById("spaner").innerText = "秋";break;
        case "10" :
        case "11" :
        case "12" : console.info("冬天");document.getElementById("span_1").innerHTML = "您查询的月份属于<span id=\"spaner\" style=\"color: blue\">&nbsp;&nbsp;&nbsp;&nbsp;</span>季";document.getElementById("spaner").innerText = "冬";break;
        default: console.error("输入错误");document.getElementById("span_1").innerText = "输入错误！";
    }
}
    </script>
<!--    外部引入-->
    <script type="text/javascript" src="../js/first.js"></script>
</head>
<body>
<label><input type="button" onclick="kill()" value="点我试试"></label>
<label><input type="button" onblur="alert('焦点离开了我！'+15e+8)" value="点我试试"></label>
<label><input type="button" onfocus="alert(123683513.264e-5)" value="点我试试"></label>
<label><input type="button" onclick="firstMethod();kill();" value="点我试试"></label>
<label>输入月份：<input type="text" id="number"></label><label><input type="button" onclick="getTime();" value="查询季节"></label>
<span id="span_1">您查询的月份属于<span id="spaner" style="color: blue">&nbsp;&nbsp;&nbsp;&nbsp;</span>季</span>
<hr/>
<div class="div" id="div_11">
    <script type="text/javascript">
        let str_a = "document";
        let str_b = "getElementById";
        str_a += ".getElementsByName(\"div_a\")";
        document.getElementById("div_11").innerText = str_a.toUpperCase();
        console.info(str_b.slice(3,9));
        // console.info(str_b.substring(8,2));推荐使用slice
        // console.info(str_b.substr(8,2));已废弃，推荐使用slice
        console.info(str_b.split("e",1));//切分字符串，变成数组
        console.info(str_b.trim());//清除字符串开头和结尾的空格（不包含字符串中间）
        // document.getElementById("div_11").innerText = str_b.toLowerCase();
    </script>
    <h2 style="text-align: center">《正则表达式》</h2>
    <table id="tableA">
        <tr>
            <th>含义</th>
            <th>正则表达式</th>
        </tr>
        <tr>
            <td>全局不分大小匹配字符串’abcde‘</td>
            <td>/abcde/ig</td>
        </tr>
        <tr>
            <td>匹配以’s‘开头的内容，长度位1位</td>
            <td>/^s/</td>
        </tr>
        <tr>
            <td>匹配以’m‘结尾的内容，长度位1位</td>
            <td>/m$/</td>
        </tr>
        <tr>
            <td>匹配包含字符a有0个以上的字符串</td>
            <td>/a*/</td>
        </tr>
        <tr>
            <td>匹配至少包含字符a有1个以上的字符串</td>
            <td>/a+/</td>
        </tr>
        <tr>
            <td>匹配包含括号中任一字符的字符串，长度不限</td>
            <td>/[123456789]/等价于/[1-9]/</td>
        </tr>
        <tr>
            <td>匹配1位数字</td>
            <td>/\d/等价于/[0-9]/</td>
        </tr>
        <tr>
            <td>匹配正整数</td>
            <td>/^[1-9]\d*$/</td>
        </tr>
    </table>
    <p>正则表达式形式：/+主体表达式+/+修饰符
    <br>
    修饰符共3个：i:表示忽略字符大小写,g:表示全局匹配,m:表示多行匹配。   ---修饰符可以同时使用：/i,/ig,/im</p>
    <a href="https://www.cnblogs.com/fozero/p/7868687.html" target="_blank">点击前往查看正则表达式大全</a>
    <hr/>
    <script type="text/javascript">
        function searchStr(){
            let str_all = document.getElementById("stringAll").value;
            let str_search = document.getElementById("stringSearch").value;
            let index = str_all.search(str_search) + 1;
            switch (0) {
                case str_all.length :
                    document.getElementById("searchResult").innerHTML = "<span style='color: red'>请输入正确的原字符串！</span>";
                    break;
                case str_search.length :
                    document.getElementById("searchResult").innerHTML = "<span style='color: #ff00a6'>请输入正确的待检索字符串！</span>";
                    break;
                default :
                    if ( index> 0){
                        document.getElementById("searchResult").innerHTML = "<span style='color: #00d23b;' >检测到字符串\""+str_search+"\"存在，首次出现在原字符串的第"+index+"位</span>";
                        document.getElementById("stringSearch").value = "";
                    }else {
                        document.getElementById("searchResult").innerText = "检测到字符串不存在，请重新输入或变更字符大小写。";
                        document.getElementById("stringSearch").value = "";
                    }
            }
        }
        // let p1 = /^bk$/ig;
        // let p2 = /^[1-9]\d*$/;
        // console.info(p2.test("346451"));
        // console.info(p2.test("0102"));
        // console.info(p2.test("-9"));
        // console.info(p2.test("2"));

    </script>
    <table>
        <tr><td>请输入原字符串：</td><td><label><input type="text" id="stringAll"></label></td></tr>
        <tr><td colspan="2">&nbsp;</td></tr>
        <tr><td>请输入待搜索字符串：</td><td><label><input type="text" id="stringSearch"></label></td></tr>
        <tr><td colspan="2">&nbsp;</td></tr>
        <tr><td colspan="2"><label><input type="button" value="开始搜索" onclick="searchStr();"></label></td></tr>
        <tr><td colspan="2">&nbsp;</td></tr>
        <tr><td colspan="2">搜索结果：<span id="searchResult"></span></td></tr>
    </table>
    <hr/>
    <script type="text/javascript">
        people_1 = {
            name: "张山",
            age: 43,
            work: "JAVA",
            email: "zslovels@163.com",
            show(){
                alert("展示我的内容。");
                return people_1;
            }
        }

        const people_2 = {
            name: "飞机",
            work: "Python",

        };
        // console.info(people_1.show());
    //    构造函数
        function User(name, work, age) {
            this.age = age;
            this.work = work;
            this.name = name;
            this.show = function () {
                return this;
            }
        }
    //    构造函数创建实例
        people_3 = new User("Iphone", "GO", 652);
        people_3.id = 201801024324;
        console.info(people_3.show());
    </script>
    <p>first，second，third，fourth，fifth，sixth，seventh，eighth，nineth，tenth</p>
</div>
</body>
</html>